<template>
  <div>
    <el-card>
      <p>AML出货数据</p>
      <div class="right margin-bottom">
			<div class="searchArea flex">
        <el-form ref="serachForm" :model="searchForm" :inline="true">
           <!--<el-form-item label="制造商：">-->
            <!--<el-input v-model="searchForm.meunName"-->
                      <!--placeholder="请输入制造商"-->
                      <!--style="width:65%"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="制造商料号：">
              <el-input v-model="searchForm.productCode"
                        placeholder="请输入制造商料号"
                        style="width:65%"></el-input>
            </el-form-item>

            <el-form-item prop="searchForm" label="状态:">
                <el-select v-model="searchForm.status" filterable placeholder="请选择" >
                    <el-option
                            v-for="item in categroyList"
                            :label="item.cateName"
                            :value="item.id"
                            :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="申请时间"
                        prop="timeRange">
            <el-date-picker v-model="searchForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item >
            <el-button  type="primary" icon="el-icon-search"  @click="getMakeUpList2">搜索</el-button>
            <el-button  type="primary" @click="dialogDetailFormVisible=true">导出</el-button>
           </el-form-item>
          </el-form>
        </div>
		</div>
      <!--<el-button type="primary" style="margin:15px 0;" @click="addInfo">新增料号</el-button>-->
      <div class="tableBox">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="500"
        >
          <el-table-column prop="aksNum" label="补单料号" align="center"></el-table-column>
          <el-table-column prop="createTime" label="申请时间" align="center">
              <template slot-scope="scope">
                  <label>{{scope.row.createTime  | formatDate}}</label>
              </template>

          </el-table-column>
          <el-table-column prop="productManuNum" label="制造商料号" align="center"></el-table-column>
          <el-table-column prop="stock" label="数量（个）" align="center"></el-table-column>
          <el-table-column prop="price" label="补料单价" align="center"></el-table-column>
          <el-table-column prop="tax" label="税金13%" align="center"></el-table-column>
          <el-table-column prop="meunName" label="制造商" align="center"></el-table-column>

          <el-table-column prop="status" width="120"
                       label="状态"
                       align="center">
            <template slot-scope="scope">
              <el-tag type="danger"
                      v-show="scope.row.status!=0">已处理</el-tag>
              <el-tag type="success"
                      v-show="scope.row.status==0">未处理</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作"  align="center" fixed="right" width="180">
            <template slot-scope="scope" >
              <el-button type="primary"  size="mini" @click="detail(scope.row)">详情</el-button>
             </template>
          </el-table-column>-->
        </el-table>
        <el-pagination
          style="text-align:center;margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <!-- 详情 -->
    <el-dialog title="详情导出" :visible.sync="detailShow">
      <el-form :model="detailForm">
        <el-form-item label="制造商料号：">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="制造商：">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="ASK料号：">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        
        <el-form-item label="价格：">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="税金">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="购买数量">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="交货时间">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="审批状态">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="是否入库">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="入库数量">
            <el-input v-model="detailForm.meunName"
                      style="width:65%"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailShow = false">返 回</el-button>
      </div>
    </el-dialog>
    <!-- 导出 -->

        <el-dialog title="导出" :visible.sync="dialogDetailFormVisible">
            <el-form :model="downLoadForm">


                <el-form-item label="创建时间">
                    <!--prop="timeRange">-->
                    <el-date-picker v-model="timeRange"
                                    clearable
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"></el-date-picker>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogDetailFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="daochu">确 定</el-button>
            </div>
        </el-dialog>



    </el-card>
  </div>
</template>

<script>
import {
  LIAOHAO_MAKEUPLIST,PRODUCT_MAKEUP_AGREE,PRODUCT_MAKEUP_REFUSE,makeuplist,downloadmakeup
} from '@/utils/api';
import { formatDate } from '@/utils/validate.js';
export default {
  data() {
    return {
        timeRange:'',
        downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
        categroyList: [
            {id:'0,1,2,4',cateName:"全部"},
            {id:'1,4',cateName:"已审批"},
            {id:2,cateName:"已婉拒"},
            {id:0,cateName:"待审批"}
        ],
      detailForm:{},
      dialogDetailFormVisible:false,
      detailShow:false,
      searchForm: {
        kinds: "",
          timeRange: [],
      },
      downLoadForm:{},
      supplementForm: {

      },

      tableData: [],
      productNo: "",
      currentPage: 1,
      pageSize: 10,
      total: 50,

      dialogVisible: false
    };
  },
  created () {
    this.getMakeUpList()
  },
    filters: {
        formatDate(time) {
            var date = new Date(time*1000);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
        }
    },
  methods: {
      daochu(){
          downloadmakeup({
              startTime: new Date(this.timeRange[0]).getTime()/1000,
              endTime:new Date(this.timeRange[1]).getTime()/1000,
          }).then(res => {
              console.log(res.data)
              var url = this.downloadUrl + res.data;
              location.href = url;
          })
      },
      detail(row){
          console.log(row)
          this.$router.push({
              path: "exorderDetail4",
              query: {
                  data: row,
                  handler: "check"
              }
          });
      },
     // 同意
    agreeApply (_scopes) {
      this.$confirm(
          '是否同意, 是否继续?',
        {
          type: 'warning',
          center: true
        }
      )
        .then(() => {
          PRODUCT_MAKEUP_AGREE({ 
          id: _scopes.id,
        }).then(res => {
          this.$message.success('操作成功') // 操作成功
              this.getRole()
        })
        })
        .catch(() => {
          this.$message.info('取消操作') // 取消操作
        })
    },
    refuseApply (_scopes) {
      this.$confirm(
          '是否拒绝, 是否继续?',
        {
          type: 'warning',
          center: true
        }
      )
        .then(() => {
          PRODUCT_MAKEUP_REFUSE({ 
          id: _scopes.id,
	        }).then(res => {
	          this.$message.success('操作成功') // 操作成功
	              this.getRole()
	        })
        })
        .catch(() => {
          this.$message.info('取消操作') // 取消操作
        })
    },
    getMakeUpList(){
        makeuplist({
          pageNo: this.currentPage,
          pageSize: this.pageSize,
      }).then(res => {
          this.tableData = res.data.dataList
          this.total = res.data.count
      })
    },
      getMakeUpList2(){

          if(this.searchForm.timeRange != 0){
              console.log(1)
              let res1=new Date(this.searchForm.timeRange[0]).getTime()/1000
              let res2=new Date(this.searchForm.timeRange[1]).getTime()/1000
              makeuplist({
                  pageNo: this.currentPage,
                  pageSize: this.pageSize,
                  productCode:this.searchForm.productCode,
                  startTime: res1,
                  endTime:res2,
                  status:this.searchForm.status
              }).then(res => {
                  this.tableData = res.data.dataList
                  this.total = res.data.count
              })
          }else{
              console.log(2)
              makeuplist({
                  pageNo: this.currentPage,
                  pageSize: this.pageSize,
                  productCode:this.searchForm.productCode,
                  status:this.searchForm.status
              }).then(res => {
                  this.tableData = res.data.dataList
                  this.total = res.data.count
              })
          }

      },


    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val
      this.getMakeUpList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
      this.getMakeUpList()
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
	.searchArea {
		width: 100%;
		margin-top: 15px;
		justify-content: flex-start;
	}
</style>